<template>
  <div class="limited-row">
    <div class="left-content">
      <div class="in-work">
        标题
      </div>
      <el-input clearable v-model="item.title"></el-input>
      <div class="in-work">
        描述
      </div>
      <editor :height="300" v-model="item.description"></editor>
<!--      <div class="in-work right-button">-->
<!--        <el-button @click="saveWork">保存</el-button>-->
<!--      </div>-->
    </div>
    <div class="right-content">
      <el-descriptions :column="1" border>
        <el-descriptions-item label-class-name="my-label" label="项目">
          <div class="in-descriptions-item">
            {{ project.name }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="工作项类型">

          <el-select v-model="item.type" placeholder="请选择工作项类型">
            <el-option
              v-for="dict in dict.type.work_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="负责人">
          <project-member class="input-class" v-model="item.assignee"
                          :project-id="item.projectId"></project-member>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">

          <el-date-picker
            v-model="item.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right">
          </el-date-picker>

        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          <div class="in-descriptions-item">
            <el-date-picker
              v-model="item.dueDate"
              type="datetime"
              placeholder="选择日期时间"
              align="right">
            </el-date-picker>
          </div>

        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <el-select v-model="item.priority" placeholder="请选择优先级" clearable>
            <el-option
              v-for="dict in dict.type.priority"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="风险">
          <div class="in-descriptions-item">
            <el-select v-model="item.risk" placeholder="请选择风险等级">
              <el-option
                v-for="dict in dict.type.work_risk"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>

</template>

<script>

import {getProjectById} from "@/api/projectUser/userProjects";
import ProjectMember from "@/components/ProjectMember/index.vue";

export default {
  name: "AddWork",
  components: {ProjectMember},
  dicts: ['work_status', 'work_type', 'priority', 'work_risk'],
  data() {
    return {
      project: {},
    };
  },
  watch: {},
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  created() {
    getProjectById(this.item.projectId).then(res => {
      this.project = res.data
    })
  },
  methods: {
    saveWork() {

    }
  }

};
</script>

<style lang="scss" scoped>
.in-work {
  padding: 10px 0;
  font-size: 20px;
}

.right-button {
  margin-left: auto;
}
</style>
